<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品页面</title>
    <link rel="shortcut icon" href="logo.ico">
    <link rel="stylesheet" href="libs/bootstrap-4/css/bootstrap.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
    <script src="libs/jquery.min.js"></script>
    <script src="libs/bootstrap-4/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/product.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/product.js"></script>
</head>

<body>
    <!--头部开始-->
    <header>
        <nav class="navbar navbar-expand-lg navbar-light">
            <h1 class="navbar-brand main-title" href="index.html">环球鞋网</h1>
            <button class="navbar-toggler navbar-button" type="button" data-toggle="collapse"
                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <h2 class="nav-link">
                            <a href="index.html">首页</a>
                        </h2>
                    </li>
                    <li class="nav-item">
                        <h2 class="nav-link">
                            <a href="http://localhost:8080/category.html?cid=1">限时秒杀</a>
                        </h2>
                    </li>
                    <li class="nav-item">
                        <h2 class="nav-link">
                            <a href="http://localhost:8080/category.html?cid=2">捕头严选</a>
                        </h2>
                    </li>
                    <li class="nav-item">
                        <h2 class="nav-link">
                            <a href="http://localhost:8080/category.html?cid=3">优选爆款</a>
                        </h2>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item dropdown">
                            <h2 class="nav-link dropdown-toggle private-information" href="#" id="navbarDropdown"
                                role="button" data-toggle="dropdown" aria-expanded="false">
                                个人中心
                            </h2>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="myorder.html">我的订单</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="car.html">购物车</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">收藏商品</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="information.html">用户信息</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <h2 class="nav-link">
                                <a href="#">商家后台</a>
                            </h2>
                        </li>
                        <li class="nav-item">
                            <h2 class="nav-link">
                                <a href="#">联系客服</a>
                            </h2>
                        </li>
                        </li>
                    </ul>
                </form>
            </div>
        </nav>
        <!--头部结束-->
    </header>
    <!--头部结束-->
    <!--标志和搜索框开始-->
    <div class="container px-0">
        <div class="row header-two">
            <div class="logo h-100 col-auto">
                <img src="images/logo.png" class="img-fluid">
            </div>
            <div class="search">
                <form>
                    <input type="text" placeholder="请输入你想查询的商品名">
                    <button type="submit">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-sousuotubiao"></use>
                        </svg>
                    </button>
                </form>
            </div>
            <div></div>
        </div>
    </div>
    <!--标志于搜索框结束-->
    <!--内容区域开始-->
    <div id="content" class="mb-3">
        <!--版心元素-->
        <div class="contentMain">
            <!--路径导航开始-->
            <div id="navPath">
            </div>
            <!--路径导航结束-->
            <!--中间区域开始-->
            <div id="center">
                <!--左侧放大镜开始-->
                <div id="left">
                    <!--上边-->
                    <div id="leftTop">
                        <!--小图框-->
                        <div id="smallPic">
                            <!--小图片-->
                            <img src="images/item1_small.png" alt="">
                            <!--蒙版元素-->
                        </div>
                        <!--大图框-->
                    </div>
                    <!--下边-->
                    <div id="leftBottom">
                        <a href="javascript:;">
                            < </a>
                                <div id="piclist">
                                    <ul></ul>
                                </div>
                                <a href="javascript:;"> > </a>
                    </div>
                </div>
                <!--左侧放大镜结束-->

                <!--右侧商品详情区域开始-->
                <div id="right">
                    <!--商品详情介绍开始-->
                    <div class="rightTop"></div>
                    <!--商品详情介绍结束-->
                    <!--商品参数的结构布局开始-->
                    <div class="rightBottom">
                        <!--选择之后结果的区域开始-->
                        <div class="choose"></div>
                        <!--选择之后结果的区域结束-->

                        <!--商品参数的选择区域开始-->
                        <div class="chooseWrap">
                            <div class="size-helper">
                                <div class="size-helper-trigger">
                                    <div class="size-helper-trigger-text">尺寸小帮手</div>
                                </div>
                            </div>
                            <div class="size-helper-notice">
                                <div class="size-helper-notice-inner">
                                    <div class="size-helper-notice-text">下方有尺寸对照表，根据自身条件选择合适尺码</div>
                                </div>
                            </div>
                        </div>
                        <!--商品参数的选择区域结束-->

                        <!--加入购物车以及数量区域开始-->
                        <div class="addCart">
                            <div class="count">
                                <input type="text" value="1" id="qtyInput">
                                <button class="countChangeBtn">+</button>
                                <button class="countChangeBtn" disabled="true">-</button>
                            </div>
                            <button class="addCartBtn">加入购物车</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--模块导航-->
    <div class="goods-nav-wrapper mt-5">
        <div class="goods-nav container px-0">
            <div class="goods-nav-fixed">
            <div class="goods-nav-text">
                <span class="goods-nav-item goods-nav-item-active">
                    商品尺码
                </span>
                <span class="goods-nav-item">
                    商品参数
                </span>
                <span class="goods-nav-item">
                    商品展示
                </span>
                <span class="goods-nav-item">
                    购物流程
                </span>
                <span class="goods-nav-item">
                    售后保障
                </span>
            </div>
            <button class="goods-nav-cart" style="display: none;">
                加入购物车
            </button>
        </div>
    </div>
    </div>
    <!--模块导结束-->
    <!--商品详细开始-->
    <div class="goods-detail container px-0 mt-0">
        <div class="goods-detail-wrapper">
            <div class="goods-detail-main container px-0">
                <div class="size-helper-table pt-3" id="size-helper">
                    <div class="size-helper-top">
                        <p class="size-helper-top-title">商品尺码</p>
                        <i>SIZE</i>
                    </div>
                </div>
                <div class="size-helper-description container mb-4">
                    <div class="size-tit">尺寸对照表：</div>
                    <div class="size-table-wrap container px-0">
                        <table class="size-table">
                            <tbody class="size-table-body">
                                <tr class="size-tr">
                                    <td>尺寸</td>
                                    <td>欧洲码</td>
                                    <td>脚长(mm)</td>
                                    <td>美国码</td>
                                </tr>
                                <tr class="size-tr">
                                    <td>33</td>
                                    <td>33</td>
                                    <td>215</td>
                                    <td>3.5</td>
                                </tr>
                                <tr class="size-tr">
                                    <td>34</td>
                                    <td>34</td>
                                    <td>220</td>
                                    <td>4</td>
                                </tr>
                                <tr class="size-tr">
                                    <td>35</td>
                                    <td>35</td>
                                    <td>225</td>
                                    <td>4.5</td>
                                </tr>
                                <tr class="size-tr">
                                    <td>36</td>
                                    <td>36</td>
                                    <td>230</td>
                                    <td>5</td>
                                </tr>
                                <tr class="size-tr">
                                    <td>37</td>
                                    <td>37</td>
                                    <td>235</td>
                                    <td>5.5</td>
                                </tr>
                                <tr class="size-tr">
                                    <td>38</td>
                                    <td>38</td>
                                    <td>240</td>
                                    <td>6</td>
                                </tr>
                                <tr class="size-tr">
                                    <td>39</td>
                                    <td>39</td>
                                    <td>245</td>
                                    <td>6.5</td>
                                </tr>
                                <tr class="size-tr">
                                    <td>40</td>
                                    <td>40</td>
                                    <td>250</td>
                                    <td>7</td>
                                </tr>
                                <tr class="size-tr">
                                    <td>41</td>
                                    <td>41</td>
                                    <td>255</td>
                                    <td>7.5</td>
                                </tr>
                                <tr class="size-tr">
                                    <td>42</td>
                                    <td>42</td>
                                    <td>260</td>
                                    <td>8</td>
                                </tr>
                                <tr class="size-tr">
                                    <td>43</td>
                                    <td>43</td>
                                    <td>265</td>
                                    <td>8.5</td>
                                </tr>
                                <tr class="size-tr">
                                    <td>44</td>
                                    <td>44</td>
                                    <td>270</td>
                                    <td>10.5</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="size-helper-btn" id="size-help-more">
                        查看更多
                        <i class="iconfont icon-xiangxia"></i>
                    </div>
                    <div class="size-helper-btn" id="size-help-up">
                        收起
                        <i class="iconfont icon-xiangshang"></i>
                    </div>
                </div>
                <div class="size-helper-table mt-3" id="goodsDetails">
                    <div class="size-helper-top">
                        <p class="size-helper-top-title">商品参数</p>
                        <i>DETAILS</i>
                    </div>
                </div>
                <div class="goods-details-contain container mt-4">
                    <div class="goods-details-content">
                        <table>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div class="goods-details-btn" id="goods-details-more">
                        查看更多
                        <i class="iconfont icon-xiangxia"></i>
                    </div>
                    <div class="goods-details-btn" id="goods-details-up">
                        收起
                        <i class="iconfont icon-xiangshang"></i>
                    </div>
                </div>
                <div class="size-helper-table mt-3" id="goods-img-tit">
                    <div class="size-helper-top">
                        <p class="size-helper-top-title">商品展示</p>
                        <i>IMAGE</i>
                    </div>
                </div>
                <div class=" container
                mt-5 px-0">
                    <div class="goods-img-box">
                    </div>
                </div>
                <div class="size-helper-table mt-3" id="shopping-process">
                    <div class="size-helper-top">
                        <p class="size-helper-top-title">购物流程</p>
                        <i>SHOPPING PROCESS</i>
                    </div>
                </div>
                <div class="shopping-process-container container px-0">
                    <div class="container">
                        <img src="./images/shopping_process.png" alt="" class="img-fluid m-auto">
                    </div>
                </div>
                <div class="size-helper-table mt-3" id="goods-guarantee">
                    <div class="size-helper-top">
                        <p class="size-helper-top-title">售后保障</p>
                        <i>GUARANTEE</i>
                    </div>
                </div>
                <div class="goods-guarantee container px-0 mt-3">
                    <div class="goods-guarantee-list container">
                        <div class="goods-guarantee-item d-flex">
                            <div class="goods-guarantee-item-left col-2">
                                <div>正品保障</div>
                                <div>ENSURANCE</div>
                            </div>
                            <div class="goods-guarantee-item-right col-10">环球鞋网出售的商品均为正品，来自国外专卖店与您在正规专卖店购买的商品完全一致</div>
                        </div>
                        <div class="goods-guarantee-item d-flex">
                            <div class="goods-guarantee-item-left col-2">
                                <div>关于色差</div>
                                <div>COLOR</div>
                            </div>
                            <div class="goods-guarantee-item-right col-10">
                                <div>
                                    环球鞋网商品图片，经过由色彩还原较高的单反相机所拍摄。同样的色彩名可能根据其所标识商品品牌、种类的不同而产生图片色彩上差别。关于商品实际色彩请参考查看商品大图。
                                    <div id="goods-guarantee-warn">
                                        根据您显示器的设定不同，实物颜色会产生不同的色差，请预先知晓！
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="goods-guarantee-item d-flex">
                            <div class="goods-guarantee-item-left col-2">
                                <div>关于发货</div>
                                <div>SHIPPING</div>
                            </div>
                            <div class="goods-guarantee-item-right col-10">
                                <div>根据您选择的快递方式不同而不同，环球鞋网报给客户的收货时间只限于正常情况，不作为最终承诺。
                                    <div id="goods-guarantee-remote">
                                        异地：全国平均到货时间是发货后2-5天，部分边缘地区可能会更长时间。
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="goods-guarantee-item d-flex">
                            <div class="goods-guarantee-item-left col-2">
                                <div>商品包装</div>
                                <div>PACK</div>
                            </div>
                            <div class="goods-guarantee-item-right col-10">
                                <div>
                                    所有商品除了厂商提供原装外包装外，我们将另外加装包装纸盒以保护商品，收货时请验明包装是否有明显的拆装、二次封装、穿洞等受损情况，如有发现任何上述情况，请立即通过商城的客服热线与我们联系。
                                </div>
                            </div>
                        </div>
                        <div class="goods-guarantee-item d-flex">
                            <div class="goods-guarantee-item-left col-2">
                                <div>关于发货</div>
                                <div>SIGN FOR</div>
                            </div>
                            <div class="goods-guarantee-item-right col-10">
                                <div>
                                    商品送达后，请当场确认商品与您订购的是否一致。您在验收商品时如发现商品配件缺失、配送错误、包装破损、商品存在质量问题等，请您向配送人员指出，并当场拒收全部或部分商品，并在送货单上注明原因。相应的赠品和优惠商品也应拒收，同时联系商城客服或拨打客服热线：15576339872，我们会为您妥善处理。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="height: 100px;"></div>
            </div>
        </div>
    </div>
    <!--商品详细结束-->
    <!--固定右侧导航栏开始-->
    <div class="toolbar-wrap" style="top:900px;">
        <div class="toolbar">
            <div class="toolbar-top">
                <a href="information.html">
                    <div class="toolbar-item m-mine">
                        <span class="iconfont icon-31wode"></span>
                        <span class="tool-text">我的</span>
                    </div>
                </a>
                <div class="toolbar-item m-msg">
                    <span class="iconfont icon-xiaoxitongzhi"></span>
                    <span class="tool-text">通知</span>
                </div>
                <a class="toolbar-item m-cart" href="car.html">
                    <span class="iconfont icon-gouwuchekong"></span>
                    <span class="tool-text">购物车</span>
                </a>
                <a href="myorder.html">
                <div class="toolbar-item m-store">
                    <span class="iconfont icon-wodedingdan"></span>
                    <span class="tool-text">订单</span>
                </div>
                </a>
                <div class="toolbar-item m-service">
                    <span class="iconfont icon-kefu"></span>
                    <span class="tool-text">客服</span>
                </div>
            </div>
            <div class="return-top">
                <i class="iconfont icon-4fanhuidingbubai"></i>
            </div>
        </div>
    </div>
    <!--固定右侧导航栏结束-->
</body>
<script src="fonts/iconfont.js"></script>
</html>